<template>
  <div class="content">
    <el-dialog v-dialogDrag title="视频详情" :visible.sync="dialogVisible" width="70%">
      <el-container class="video-container">
        <el-aside class="video-aside">
          <div class="input_video">
            <video-player class="video-player vjs-custom-skin"
                          ref="dialogVideoPlayer"
                          :playsinline="true"
                          :options="getPlayerOptions(activeVideo.videoPath, false, false, false,true)">
            </video-player>
          </div>
        </el-aside>
        <el-main class="video-main">
          <el-divider></el-divider>
          <span style="margin-right: 10px">视频ID：</span>
          <span style="margin-left: 10px">{{ activeVideo.videoId }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">视频名称：</span>
          <span style="margin-left: 10px">{{ activeVideo.videoName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">产品名称：</span>
          <span style="margin-left: 10px">{{ activeVideo.productName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">投放平台：</span>
          <span style="margin-left: 10px">{{ activeVideo.platformName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">行业：</span>
          <span style="margin-left: 10px">{{ activeVideo.industryName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">类型：</span>
          <span style="margin-left: 10px">{{ activeVideo.categoryName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">代理商的简称：</span>
          <span style="margin-left: 10px">{{ activeVideo.userName }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">上传时间：</span>
          <span style="margin-left: 10px">{{ activeVideo.createTime }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">消费金额(30天):</span>
          <span style="margin-left: 10px">{{ format_data(activeVideo.consumptionAmount) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">点击率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.clickRate) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">转化率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.conversionRate) }}</span>
          <el-divider></el-divider>
          <span style="margin-right: 10px">完播率(30天):</span>
          <span style="margin-left: 10px">{{ format_percentage(activeVideo.finishRate) }}</span>
          <el-divider></el-divider>
        </el-main>
      </el-container>
    </el-dialog>
    <el-table
      ref="singleTable"
      :data="songList"
      highlight-current-row
      @cell-click="handleCellClick"
      @current-change="handleCurrentChange">
      <el-table-column
        type="index"
        label="编号">
      </el-table-column>
      <el-table-column
        property="videoName"
        label="名称">
      </el-table-column>
      <el-table-column property="videoId" label="视频ID"></el-table-column>
      <el-table-column label="视频">
        <template #default="scope">
          <video-player class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="getPlayerOptions(scope.row.videoPath, false, false, false, false)"></video-player>
        </template>
      </el-table-column>
      <el-table-column
        property="industryName"
        label="行业">
      </el-table-column>
      <el-table-column
        property="categoryName"
        label="分类">
      </el-table-column>
      <el-table-column
        property="platformName"
        label="投放平台">
      </el-table-column>
      <el-table-column
        property="productName"
        label="产品名称">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import mixin from '../mixins'
import {deleteVideoById} from '../api/index'
import numeral from 'numeral'

export default {
  name: 'album-content',
  mixins: [mixin],
  props: {
    songList: Array
  },
  computed: {
    ...mapGetters([
      'id' // 音乐ID
    ]),
  },
  data () {
    return {
      currentRow: null,
      dialogVisible: false,
      activeVideo: {}
    }

  },
  methods: {
    handleCurrentChange (val) {
      this.currentRow = val
    },
    handleCellClick (row, column, cell, event) {
      if (column.label === '名称') {
        this.$router.push({name: 'videoDetail', params: {videoId: row.id}})
      } else if (column.label === '视频') {
        this.activeVideo = row
        this.dialogVisible = true
      }
    },
    handleDelete (videoId, rowId) {
      let _this = this
      let token = _this.$store.getters.token
      let config = {headers: {'Authorization': token}}

      deleteVideoById(videoId, config).then(res => {
        if (res.data.code === 200) {
          _this.$message.success({'message': '删除成功', duration: 2 * 1000})
          this.songList.splice(rowId, 1)
        }
      }).catch(err => {
        _this.$message.error('删除失败')
      })
    },
    getPlayerOptions (videoPath, timeDivider, durationDisplay, remainingTimeDisplay, fullscreenToggle) {
      return {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: '',
          src: videoPath//url地址
        }],
        poster: '', //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          fullscreenToggle: fullscreenToggle,
          timeDivider: timeDivider,
          durationDisplay: durationDisplay,
          remainingTimeDisplay: remainingTimeDisplay,
          currentTimeDisplay: false,
        }
      }
    },
    format_percentage (data) {
      return numeral(data).format('0.00%')
    },

    format_data (data) {
      return numeral(data).format('0.00')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/album-content.scss';
</style>
